<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 600px;
			height: 600px;
			/*margin: 50px auto;*/
			border-radius: 50%;
			background-image:linear-gradient(to bottom right,gray,red,gray);
			position: absolute;
			left: 300px;
			box-shadow: 10px 10px 20px 5px black;

		}
		.clock{
			width: 500px;
			height: 500px;
			background-color: white;
			border-radius:50%; 
			margin: 50px;
			box-shadow: inset 10px 10px 20px 5px gray;
			position: relative;
			
		}
		.kedu{
			width: 20px;
			height: 250px;
			/*background-color: red;*/
			position: absolute;
			left:240px;
			transform-origin:bottom center;
		}
		.kedu>span{
			display: inline-block;
			width: 4px;
			height:6px;
			background-color: brown;
			position: absolute;
			left: 8px;

		}
		.kedu:nth-child(5n+1)>span{
			width: 5px;
			height: 10px;
			background-color: black;
		}
		.num{
			width: 20px;
			height: 240px;
			/*background-color: red;*/
			transform-origin:bottom center;
			position: absolute;
			left:230px;
			top:10px;
		}
		.num>span{
			display: inline-block;
			width: 40px;
			height: 40px;
			font-size: 20px;
			line-height: 40px;
			text-align: center;
			position: absolute;
			right: -9px;

		}
		#hour,#second,#minute{
			position: absolute;
			transform-origin:bottom center;

		}
		#hour{
			width: 15px;
			height: 150px;
			background-color: yellow;
			
			top:100px;
			left: 242px;
			
		}
		#minute{
			width: 10px;
			height: 180px;
			background-color: gray;
			
			top:70px;
			left: 245px;
			
		}
		#second{
			width: 8px;
			height: 200px;
			background-color: brown;
		transform-origin:bottom center;
			top: 50px;
			left: 246px;
			
		}





	</style>
</head>
<body>
	<div class="box">
		<div class="clock">
				<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>
					<div class="kedu "><span></span></div>		
	
					
					<div class="num"><span>1</span></div>
					<div class="num"><span>2</span></div>
					<div class="num"><span>3</span></div>
					<div class="num"><span>4</span></div>
					<div class="num"><span>5</span></div>
					<div class="num"><span>6</span></div>
					<div class="num"><span>7</span></div>
					<div class="num"><span>8</span></div>
					<div class="num"><span>9</span></div>
					<div class="num"><span>10</span></div>
					<div class="num"><span>11</span></div>
					<div class="num"><span>12</span></div>

					<div id="hour"></div>
					<div id="minute"></div>
					<div id="second"></div>

		</div>
	</div>
</body>
</html>
<script>
	var keduArr = document.getElementsByClassName("kedu");
	for(var i = 0; i < keduArr.length; i++){
		keduArr[i].style.transform = "rotate("+i*6+"deg)";
	}
	var numArr = document.getElementsByClassName("num");
	for(var i = 0; i < numArr.length; i++){
		var numDiv = numArr[i];
		numDiv.style.transform = "rotate("+(i*30+30)+"deg)";
		var span = numDiv.children[0];
		var rotate = -1*(i*30+30);
		span.style.transform = "rotate("+rotate+"deg)";

	}
	var hourDiv = document.getElementById("hour");
	var minuteDiv = document.getElementById("minute");
	var secondDiv = document.getElementById("second");
	click();
	setInterval(click,500);
	function click(){
		var now = new Date();
		var second = now.getSeconds();
		var minute = now.getMinutes();
		var hour = now.getHours();
		var sDeg = second*6;
		secondDiv.style.transform = "rotate("+sDeg+"deg)";
		var mDeg = minute*6+6/60*second;
		minuteDiv.style.transform = "rotate("+mDeg+"deg)";
		var hDeg = hour*30+30/60*minute+30/3600*second;
		hourDiv.style.transform = "rotate("+hDeg+"deg)";

	}




</script>